Screen Wake Lock API: Forhindring af skærmslukning i webapplikationer

Screen Wake Lock API er et web-API, der giver webapplikationer mulighed for at forhindre enheder i at dæmpe eller låse skærmen. Dette er især nyttigt for applikationer, hvor kontinuerlig skærmsynlighed er afgørende, såsom medieafspillere, navigationsapps og applikationer, der kræver brugerinteraktion i længere perioder.

Hvorfor er Screen Wake Lock vigtigt?

I dagens verden forventer brugere problemfrie oplevelser. En enhed, der automatisk dæmper eller låser skærmen, kan forstyrre disse oplevelser, især når brugere er aktivt engagerede i en webapplikation. Overvej disse scenarier:

• Videoafspilning: Forestil dig at se en film eller følge en madlavningsvejledning, og skærmen dæmpes konstant, hvilket tvinger dig til at trykke på skærmen for at holde den i live. Dette er en frustrerende oplevelse.
• Navigationsapps: Mens du kører og bruger en navigationsapp, skal skærmen forblive tændt for at give kontinuerlige anvisninger. En dæmpet eller låst skærm kan føre til missede sving og potentielle sikkerhedsrisici.
• Præsentationsapps: At præsentere slides eller vise vigtig information kræver, at skærmen forbliver aktiv under hele præsentationen.
• Spilapplikationer: Mange spil kræver uafbrudt skærmsynlighed for gameplay. Skærmslukning kan forstyrre spiloplevelsen.
• Online Whiteboards: At arbejde sammen på et online whiteboard kræver, at skærmen forbliver tændt, så brugerne ikke gentagne gange skal trykke for at genaktivere.

Screen Wake Lock API giver en løsning på disse problemer, hvilket gør det muligt for webapplikationer at kontrollere skærmens tænd/sluk-tilstand og levere en mere problemfri og brugervenlig oplevelse.

Browserunderstøttelse

Pr. ultimo 2024 har Screen Wake Lock API solid understøttelse på tværs af de store browsere. Det er dog altid afgørende at tjekke de seneste oplysninger om browserkompatibilitet på ressourcer som Mozilla Developer Network (MDN) og Can I use for at sikre optimal kompatibilitet på tværs af browsere. Browserunderstøttelse kan variere baseret på browserversion og operativsystem.

Brug af Screen Wake Lock API

Screen Wake Lock API er relativt ligetil at bruge. Her er en gennemgang af de vigtigste trin:

1. Tjek for API-understøttelse

Før du forsøger at bruge API'et, er det vigtigt at tjekke, om brugerens browser understøtter det. Dette forhindrer fejl i browsere, der ikke implementerer API'et.

            if ('wakeLock' in navigator) {
  // Screen Wake Lock API understøttes
} else {
  // Screen Wake Lock API understøttes ikke
  console.log('Screen Wake Lock API understøttes ikke af denne browser.');
}

            

              
                Copy
              
            
          

2. Anmod om en Wake Lock

For at anmode om en wake lock, skal du bruge metoden navigator.wakeLock.request(). Denne metode returnerer et Promise, der resolveres med et WakeLockSentinel-objekt, hvis anmodningen lykkes. WakeLockSentinel-objektet repræsenterer den aktive wake lock.

            let wakeLock = null;

const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen wake lock aktiv!');

    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock blev frigivet');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Kald denne funktion for at aktivere wake lock
requestWakeLock();

            

              
                Copy
              
            
          

I dette eksempel forsøger requestWakeLock()-funktionen at erhverve en screen wake lock. Argumentet 'screen' specificerer, at vi vil forhindre skærmen i at dæmpe eller låse. Hvis anmodningen lykkes, logges en besked til konsollen. Koden inkluderer også en fejlhåndtering til at fange eventuelle undtagelser, der måtte opstå under anmodningen om wake lock. Kritisk er det, at koden tilføjer en event listener, der lytter efter "release"-hændelsen, som indikerer, når Wake Lock ikke længere er aktiv. Dette kan ske, hvis brugeren eksplicit har frigivet låsen, eller hvis systemet har geninddraget den på grund af strømbesparende foranstaltninger.

3. Frigiv Wake Lock

Det er afgørende at frigive wake lock, når den ikke længere er nødvendig. Hvis man undlader at gøre det, kan det dræne enhedens batteri og have en negativ indvirkning på brugeroplevelsen. For at frigive wake lock, skal du kalde release()-metoden på WakeLockSentinel-objektet.

            const releaseWakeLock = async () => {
  if (wakeLock) {
    await wakeLock.release();
    wakeLock = null;
    console.log('Screen wake lock frigivet!');
  }
};

// Kald denne funktion for at frigive wake lock
releaseWakeLock();

            

              
                Copy
              
            
          

Denne funktion frigiver sikkert wake lock og sætter wakeLock-variablen til null. Det er vigtigt at sikre, at wakeLock-variablen håndteres korrekt for at undgå fejl ved frigivelse af låsen.

4. Håndtering af Wake Lock Release-hændelser

Systemet kan frigive wake lock af forskellige årsager, såsom brugerinaktivitet eller lavt batteriniveau. Det er vigtigt at lytte efter release-hændelsen på WakeLockSentinel-objektet for at håndtere disse situationer elegant. Dette giver dig mulighed for at genanmode om wake lock eller træffe andre passende foranstaltninger.

            wakeLock.addEventListener('release', () => {
  console.log('Screen Wake Lock blev frigivet');
  // Forsøg at genanmode om wake lock
  // eller træf andre passende foranstaltninger
  requestWakeLock(); // For eksempel ved at genanmode om wakelock
});

            

              
                Copy
              
            
          

Dette eksempel viser, hvordan man lytter efter release-hændelsen og potentielt genanmoder om wake lock. Den faktiske implementering vil afhænge af de specifikke krav til din applikation.

Bedste praksis og overvejelser

Selvom Screen Wake Lock API er et kraftfuldt værktøj, er det vigtigt at bruge det ansvarligt og overveje følgende bedste praksis:

• Anmod kun om Wake Locks, når det er nødvendigt: Undgå at erhverve wake locks unødvendigt, da de kan dræne enhedens batteri. Anmod kun om en wake lock, når kontinuerlig skærmsynlighed er virkelig afgørende for brugeroplevelsen.
• Frigiv Wake Locks omgående: Frigiv wake lock, så snart den ikke længere er nødvendig. Dette hjælper med at spare på batteriet og forhindre unødvendigt strømforbrug.
• Håndter Release-hændelser elegant: Vær forberedt på, at systemet uventet kan frigive wake lock. Lyt efter release-hændelsen og træf passende foranstaltninger, såsom at genanmode om wake lock eller informere brugeren.
• Giv brugerkontrolmuligheder: Overvej at give brugerne kontrol til at aktivere eller deaktivere wake lock-funktionen. Dette giver brugerne mere kontrol over deres enheds strømforbrug og giver dem mulighed for at tilpasse applikationens adfærd. For eksempel kunne en medieafspiller have en "Hold skærmen tændt"-knap.
• Overvej batterilevetid: Vær opmærksom på indvirkningen på batterilevetiden. At holde skærmen tændt konstant kan reducere batterilevetiden betydeligt, især på mobile enheder. Informer brugerne om den potentielle indvirkning og giv muligheder for at afbøde den.
• Brugertilladelse: Selvom API'et ikke direkte beder om brugertilladelse, er det god praksis at meddele brugeren, at applikationen forhindrer skærmen i at gå i dvale, og give dem mulighed for at deaktivere denne adfærd.
• Fallback-mekanisme: For browsere, der ikke understøtter API'et, kan du overveje at implementere en fallback-mekanisme. Dette kan involvere brug af JavaScript til periodisk at sende "dummy"-hændelser til skærmen for at forhindre den i at dæmpe eller låse. Vær dog opmærksom på, at denne tilgang kan være mindre pålidelig og mere ressourcekrævende end at bruge Screen Wake Lock API.
• Test: Test din applikation grundigt på forskellige enheder og browsere for at sikre, at Screen Wake Lock API fungerer som forventet. Vær opmærksom på batteriforbrug og brugeroplevelse.
• Tilgængelighed: Vær opmærksom på, at det at holde skærmen tændt konstant kan være problematisk for nogle brugere. At give måder at deaktivere screen wake lock på gør din applikation mere tilgængelig.

Eksempler fra den virkelige verden

Her er nogle eksempler fra den virkelige verden på, hvordan Screen Wake Lock API kan bruges i forskellige applikationer:

• Medieafspillere: En videostreaming-app kan bruge Screen Wake Lock API til at forhindre skærmen i at dæmpe under afspilning, hvilket giver en problemfri seeroplevelse.
• Navigationsapps: En navigationsapp kan bruge API'et til at holde skærmen tændt, mens brugeren kører, hvilket sikrer, at anvisningerne altid er synlige.
• Præsentationsapps: En præsentationsapp kan bruge API'et til at forhindre skærmen i at dæmpe under en præsentation, hvilket sikrer, at publikum altid kan se slidesene.
• Fitness-apps: En fitness-app, der sporer en træningssession, kan holde skærmen tændt, så brugerne hurtigt kan se målinger uden at skulle låse deres enhed op.
• Opskrifts-apps: En opskrifts-app kan bruge API'et til at holde skærmen tændt, mens brugeren følger en opskrift, hvilket forhindrer skærmen i at dæmpe, mens brugeren laver mad.
• Kiosk-applikationer: Kiosk-applikationer drager fordel af denne funktion. For eksempel kan selvbetjeningskiosker i lufthavne eller restauranter bruge Screen Wake Lock API til at sikre, at skærmen forbliver aktiv og reagerer på brugerinteraktioner.
• Telemedicin-applikationer: Under virtuelle lægebesøg, især dem, der kræver observation, kan Screen Wake Lock API bruges til at sikre, at skærmen forbliver tændt under hele konsultationen.

Kodeeksempel: Medieafspiller med Screen Wake Lock

Dette eksempel viser, hvordan man implementerer Screen Wake Lock API i en simpel medieafspiller-applikation.

            
<!DOCTYPE html>
<html>
<head>
  <title>Medieafspiller med Screen Wake Lock</title>
</head>
<body>
  <video id="myVideo" width="640" height="360" controls>
    <source src="your-video.mp4" type="video/mp4">
    Din browser understøtter ikke video-tagget.
  </video>

  <button id="wakeLockBtn">Aktivér Screen Wake Lock</button>

  <script>
    const video = document.getElementById('myVideo');
    const wakeLockBtn = document.getElementById('wakeLockBtn');
    let wakeLock = null;

    const requestWakeLock = async () => {
      try {
        wakeLock = await navigator.wakeLock.request('screen');
        console.log('Screen wake lock aktiv!');
        wakeLockBtn.textContent = 'Deaktivér Screen Wake Lock';

        wakeLock.addEventListener('release', () => {
          console.log('Screen Wake Lock blev frigivet');
          wakeLockBtn.textContent = 'Aktivér Screen Wake Lock';
        });

      } catch (err) {
        console.error(`${err.name}, ${err.message}`);
      }
    };

    const releaseWakeLock = async () => {
      if (wakeLock) {
        await wakeLock.release();
        wakeLock = null;
        console.log('Screen wake lock frigivet!');
        wakeLockBtn.textContent = 'Aktivér Screen Wake Lock';
      }
    };

    wakeLockBtn.addEventListener('click', () => {
      if (wakeLock) {
        releaseWakeLock();
      } else {
        requestWakeLock();
      }
    });

    // Valgfrit: Anmod automatisk om wake lock, når videoen starter med at afspille
    video.addEventListener('play', () => {
        if(!wakeLock){
            requestWakeLock();
        }
    });

  </script>
</body>
</html>

            

              
                Copy
              
            
          

Denne kode opretter en simpel medieafspiller med en knap til at aktivere eller deaktivere screen wake lock. Når der klikkes på knappen, anmoder koden enten om en ny wake lock eller frigiver den eksisterende. Knappens tekst opdateres for at afspejle den aktuelle status for wake lock. Dette eksempel inkluderer også en valgfri event listener, der automatisk anmoder om wake lock, når videoen starter med at afspille. Bemærk: Erstat your-video.mp4 med den faktiske sti til din videofil.

Sikkerhedsovervejelser

Screen Wake Lock API er designet med sikkerhed for øje. Browsere implementerer forskellige sikkerhedsforanstaltninger for at forhindre misbrug af API'et. For eksempel kan browsere begrænse varigheden, en wake lock kan holdes, eller kræve brugerinteraktion, før en wake lock tildeles. Følg altid de bedste praksis, der er beskrevet tidligere i denne artikel, for at sikre, at du bruger API'et ansvarligt og etisk.

Alternativer til Screen Wake Lock API

Før Screen Wake Lock API anvendte udviklere ofte "hacks" for at forhindre skærmslukning. Disse metoder er generelt upålidelige og anbefales ikke.

• No-Op Videoelement: Indsættelse af et lille, lydløst videoelement på siden og kontinuerlig afspilning af det. Dette narrer systemet til at tro, at der afspilles medier, og forhindrer dermed dvale. Dette er ekstremt ressourcekrævende.
• Dummy AJAX-anmodninger: Periodisk at sende AJAX-anmodninger til serveren for at holde enheden "aktiv". Dette er en dårlig erstatning, da det er netværksintensivt og upålideligt.

Disse metoder anbefales ikke, da de er upålidelige og kan have en negativ indvirkning på ydeevne og batterilevetid. Screen Wake Lock API er den anbefalede løsning til at forhindre skærmslukning i webapplikationer.

Konklusion

Screen Wake Lock API er et værdifuldt værktøj for webudviklere, der ønsker at skabe problemfrie og engagerende brugeroplevelser. Ved at forhindre enheder i at dæmpe eller låse skærmen, kan du sikre, at dine applikationer forbliver synlige og responsive, selv under længere perioder med inaktivitet. Husk at bruge API'et ansvarligt og følg de bedste praksis, der er beskrevet i denne artikel, for at undgå at dræne enhedens batteri og negativt påvirke brugeroplevelsen. I takt med at API'et opnår bredere anvendelse, vil det utvivlsomt blive en essentiel del af webudviklerens værktøjskasse. Omfavn kraften i Screen Wake Lock API for at løfte dine webapplikationer og give en mere behagelig oplevelse for dine brugere verden over.